<!-- eslint-disable max-len -->
<template>
  <s-table
    class="h100"
    ref="flowConfigTable"
    :columns="columns"
    :data="loadData"
    :showPagination="true"
    rowKey="id"
    :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange, columnWidth:'60px',fixed:true }"
    :scrollX="1200"
    :scrollY="450"
  >
  <!-- getCheckboxProps: setDisableRow -->
    <!-- 自定义勾选框 -->
    <span slot="noteForSelect">
      <question-mark-tip :tip-title="$t('noDeleteRelatedFormTip')" :popupContainer="getPopupContainer" class="setSpecialForSelect">
      </question-mark-tip>
       {{ $t('formsId') }}
    </span>
     <template #serialNo="text">
      <span v-if="text">{{text}}</span>
      <span v-if="!text">-</span>
    </template>
    <template #isConfigFile="text">
      <span v-if="text===0">{{ $t('no') }}</span>
      <span v-if="text===1">{{ $t('yes') }}</span>
    </template>
    <template #applyStatus="text">
      <table-ellipsis
        :tableEllipsisIsTurnLine="false"
        :text="text?$options.filters.DictLabelFilter(text,formsStatusArr):'-'">
      </table-ellipsis>
    </template>
    <template #shelveStatus="text">
      <span v-if="text===10" class="onshelf">{{ $t('onshelfed') }}</span>
      <span v-if="text===20" class="offshelf">{{ $t('offshelfed') }}</span>
      <span v-if="!text">-</span>
    </template>
    <template #upgradePackType="text">
      <span v-if="text===1">全包</span>
      <span v-if="text===2">差分包</span>
    </template>
    <template slot="createTime" slot-scope="text">
      <table-ellipsis
        :tableEllipsisIsTurnLine="false"
        :text="text ? $options.filters.moment(text) : '_'">
      </table-ellipsis>
    </template>
    <template #operation="text">
      <span style="display: flex;">
        <span class="set-margin">
          <auth-button type="primary" :ghost="true" size="small" :auth="mcPerms.view" @click="viewTbRow(text)"><i class="iconfont icon-yanjing"/>{{ $t('view') }}</auth-button>
        </span>
        <span class="set-margin" v-if="(text.applyStatus===20||text.applyStatus===60||text.applyStatus===70||text.applyStatus===90)&&text.applyUserId==applyUserId">
          <!-- <span class="set-margin"> -->
          <auth-button type="primary" :ghost="true" size="small" :auth="mcPerms.edit" @click="editFailedForm(text)"><i class="iconfont icon-xiugai"/>{{ $t('edit') }}</auth-button>
        </span>
        <!-- <span class="set-margin" v-if="text.applyStatus!==10&&text.applyStatus!==40&&(!text.isRelated)">
          <auth-button type="danger" :ghost="true" size="small" :auth="mcPerms.delete" @click="deleteTbRow(text)"><i class="iconfont icon-shanchu3 deleteUlr"/>{{ $t('delete') }}</auth-button>
        </span> -->
        <span class="set-margin" v-if="text.applyStatus!==100 && text.shelveStatus===20">
          <auth-button type="primary" :ghost="true" size="small" :auth="mcPerms.sj" @click="sj(text)"><i class="iconfont icon-shangjia"/>{{ $t('sj') }}</auth-button>
        </span>
        <span class="set-margin" v-if="text.isDifference==1">
          <auth-button type="danger" :ghost="true" size="small" :auth="mcPerms.xj" @click="diff(text)"><i class="iconfont icon-banben"/>{{ $t('onlineDifference') }}</auth-button>
        </span>
        <span v-if="text.shelveStatus===10">
          <auth-button type="danger" :ghost="true" size="small" :auth="mcPerms.xj" @click="xj(text)"><i class="iconfont icon-xiajia"/>{{ $t('xj') }}</auth-button>
        </span>
        <!-- 废止 -->
        <span v-if="(text.applyStatus===60||text.applyStatus===70||text.applyStatus===120||text.applyStatus===140)&&text.applyUserId==applyUserId">
          <auth-button type="danger" :ghost="true" size="small" :auth="mcPerms.repeal" @click="fz(text)">
            <a-icon type="close-circle" theme="filled"  :style="text.instanceStatus===30||text.instanceStatus===40||text.instanceStatus===80||text.instanceStatus===100?{color:red}:{}"/>{{ $t('repeal') }}</auth-button>
        </span>
      </span>
    </template>
  </s-table>
</template>
<script>
import { mapState } from 'vuex'
import STable from '@/components/Table/index'
import tableEllipsis from '@/components/Ellipsis/TableEllipsis'
import { softwareManageTbColumns, formsStatusArr } from '../config/list'
import QuestionMarkTip from '@/views/components/QuestionMarkTip'
import { mcPerms } from '@/config/permission/index'
import AuthText from '@/components/AuthText'
import AuthButton from '@/components/AuthButton'

export default {
  components: {
    STable,
    tableEllipsis,
    AuthText,
    QuestionMarkTip,
    AuthButton
  },
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    ...mapState({
      queryParams: (state) => state.softwareManageAndControl.queryParams
    })
  },
  data () {
    return {
      selectedRowKeys: [],
      columns: softwareManageTbColumns,
      formsStatusArr,
      mcPerms,
      applyUserId:'',
    }
  },
  created(){
    this.$api.getApplicantInfo().then(res => {
      this.applyUserId = res.data.applyUserId ? res.data.applyUserId : '-'
    })
  },
  activated(){
    this.refreshData(false)
  },
  methods: {
    // 上架表单
    sj (data) {
      const that = this
      const h = this.$createElement
      this.$confirm({
        title: that.$t('onshelfTip'),
        content: h('div', [h('b',that.$t('onshelfContent') ), h('p', that.$t('onshelfContent2'))]),
        onOk () {
          that.$api.listingForm({ id: data.id * 1 }).then(
            () => {
              that.refreshData()
            }
          )
        },
        onCancel () { }
      })
    },
    // 下架表单
    xj (data) {
      const that = this
      const h = this.$createElement
      this.$confirm({
        title: that.$t('offshelfTip'),
        content: h('div', [h('b',that.$t('offshelfContent') ), h('p', that.$t('offshelfContent2'))]),
        onOk () {
          that.$api.offshelfForm({ id: data.id * 1 }).then(
            () => {
              that.refreshData()
            }
          )
        },
        onCancel () { }
      })
    },
    // 废止表单
    fz(data){
      const that = this
      const h = this.$createElement
      this.$confirm({
        title: that.$t('repealTip'),
        content: h('div', [h('b',that.$t('repealContent') ), h('p', that.$t('repealContent2'))]),
        onOk () {
          that.$api.repealForm({ instanceId: data.instanceId }).then(
            () => {
              that.refreshData()
            }
          )
        },
        onCancel () { }
      })
    },
    // 在线差分
    diff (data) {
      this.$router.push({ path: '/mc/new', query: { originalId: data.id, t: 9 } })
    },
    // 请求接口数据加载表格
    loadData (parameter) {
      const vm = this
      const JnqueryParam = JSON.parse(JSON.stringify(vm.queryParams))
      // eslint-disable-next-line no-restricted-syntax
      for (const key in JnqueryParam) {
        if (JnqueryParam[key] === '') {
          JnqueryParam[key] = undefined
        }
      }
      this.selectedRows = []
      this.selectedRowKeys = []
      return this.$api.getSoftwareMCList({ ...parameter, ...JnqueryParam })
    },
    // 表格选择更改
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.$emit('selectedRowchange', selectedRows)
    },
    // 更新表格
    refreshData (isToFirstPage = true) {
      // let obj = null
      // if (isToFirstPage) {
      //   obj = { current: 1 }
      // }
      // this.$refs.flowConfigTable.loadData(obj)
      this.$refs.flowConfigTable.refresh(isToFirstPage)
    },
    // 清空表格勾选项
    emptyTableSelction () {
      this.selectedRowKeys = []
    },
    // 点击查看按钮
    viewTbRow (data) {
      if(data.shelveStatus===20&&data.applyUserId!=this.applyUserId){
        this.$router.push({ path: '/mc/view', query: { id: data.id, t: 2, status: data.applyStatus, shelf: data.shelveStatus ? data.shelveStatus : 'not', instanceId: data.instanceId,unRepeal: 1 } })
      }else{
        // eslint-disable-next-line max-len
        this.$router.push({ path: '/mc/view', query: { id: data.id, t: 2, status: data.applyStatus, shelf: data.shelveStatus ? data.shelveStatus : 'not', instanceId: data.instanceId } })
      }
    },
    // 点击删除按钮
    deleteTbRow (data) {
      const that = this
      that.$confirm({
        title: that.$t('tip'),
        content: that.$t('deleteSoftMCtip').replace('__Content__', data.applyNumber),
        onOk () {
          that.$api.deleteSoftMCForm({ ids: [ data.id ] }).then(
            () => {
              that.refreshData()
            }
          )
        },
        onCancel () { }
      })
    },
    // 状态为文件加工中或审批中的表单禁用批量勾选删除
    // 现在已经没有批量删除了，只有根据选中复制新建，置灰限制不需要了
    // setDisableRow (record) {
    //   return {
    //     props: {
    //       disabled: record.applyStatus === 10 || record.applyStatus === 40 || record.isRelated // 控制表格勾选框是否禁用勾选
    //     }
    //   }
    // },
    // 编辑文件加工失败的表单
    editFailedForm (data) {
      if(data.formFileBuilderType){
        this.$router.push({ path: '/mc/editAgain', query: { originalId: data.id, t: 5, diff:1, instanceId: data.instanceId } })
      }else{
        this.$router.push({ path: '/mc/editAgain', query: { originalId: data.id, t: 5, instanceId: data.instanceId } })
      }
    },
    getPopupContainer () {
      return document.body
    }
  }
}
</script>
<style lang="less" scoped>
.set-margin {
  margin-right: 12px;
}
.setSpecialForSelect{
  position: absolute;
  top: 9px;
  left: 44px;
}
</style>
